import React, { Component } from "react";
import { connect } from "react-redux";
import "./catetry.scss";
import { NavBar } from "antd-mobile";
import { withRouter } from "react-router-dom";
import { getCatetry, getCatetryModify1, getCatetryModify2 } from "../../store/action/actions";
class catetry extends Component {
  handleClick = () => {
    this.props.history.push("/search");
  };
  handleItemClick(e) {
    let id = parseInt(e.target.getAttribute("data-index"));
    this.props.axiosModify2(id)
  }
  handleImgClick = (e) => {
    console.log();
    this.props.history.push("/goodList/" + e.target.getAttribute("data-index"));
  }
  // 本地缓存
  componentDidMount() {
    if (this.props.content_title.length === 0) {
      this.props.axiosGet("/categories");
    } else {
      //  看localStorage里是否有数据
      let lists = localStorage.getItem("ListData");
      // 有数据
      if (lists) {
        let time = JSON.parse(lists).time;
        let list1 = JSON.parse(lists).list;
        // 判断是否过期,
        if (Date.now() - time > 3600 * 1000) {
          // 大于一个小时，重新发起请求
          this.props.axiosGet("/categories");
        } else {
          // 小于一个小时，直接赋值
          this.props.axiosModify1(list1);
        }
      } else {
        // 没有数据,请求数据
        this.axiosGet("/categories");
      }
    }
  }
  render() {
    return (
      <div className="catetry">
        {/* 标题栏开始 */}
        <div className="ygCatetryTitle">
          <NavBar> 商品分类 </NavBar>
        </div>
        {/* 标题栏结束 */}
        {/* 搜索框开始 */}
        <div className="ygCatetryScour">
          <span className="tgScour" onClick={this.handleClick}>
            搜索
          </span>
        </div>
        {/* 搜索框结束 */}
        {/* 内容开始 */}
        <div className="ygCatetryContent">
          {/* 左边内容开始 */}
          <div
            className="ygContent_left"
            onClick={this.handleItemClick.bind(this)}
          >
            {this.props.content_title.map((v, index) => (
              <div className="ygContent_left_item" key={v.cat_id}>
                <span
                  data-index={index}
                  className={this.props.content_index === index ? "on" : ""}
                >
                  {v.cat_name}
                </span>
              </div>
            ))}
          </div>
          {/* 右边内容开始 */}
          <div className="ygContent_right">
            {this.props.content_list.map((v) => (
              <div className="ygContent_right_item" key={v.cat_id}>
                <div className="right-item-title">{"/" + v.cat_name + "/"}</div>
                <div className="right-item-cont">
                  {v.children &&
                    v.children.map((ele) => (
                      <div
                        key={ele.cat_id}
                        className="right-item"
                        onClick={this.handleImgClick}
                      >
                        <div className="right-item-img">
                          <img
                            src={ele.cat_icon}
                            data-index={ele.cat_id}
                            alt=""
                          />
                        </div>
                        <div className="right-item-text"> {ele.cat_name}</div>
                      </div>
                    ))}
                </div>
              </div>
            ))}
          </div>
        </div>
        {/* 内容结束 */}
      </div>
    );
  }
}
// 用一个箭头函数去映射
const mapCateState = (store) => {
  return {
    content_title: store.CATETRY.content_title,
    content_list: store.CATETRY.content_list,
    content_index: store.CATETRY.content_index,
  };
};
const mapCatetryAction = (dispatch) => {
  return {
    axiosGet: (params) => dispatch(getCatetry(params)),
    axiosModify1: (list) => dispatch(getCatetryModify1(list)),
    axiosModify2: (id) => dispatch(getCatetryModify2(id))
  };
};
export default connect(mapCateState, mapCatetryAction)(withRouter(catetry));

